<template>
	<view class="ChangeAddress">
		<topbar-change-address></topbar-change-address>
		<!-- 表单 -->
		<view class="add-new-address">
			<view>
				<u-form :model="form" ref="uForm">
					<u-form-item label="姓名" prop="name" label-width="150rpx">
						<u-input v-model="form.name" type="text" placeholder="收货人姓名"/>
					</u-form-item>
					<u-form-item label="电话" prop="tel"label-width="150rpx">
						<u-input v-model="form.tel" type="text" placeholder="收货人手机号"/>
					</u-form-item>
					<u-form-item label="地区" prop="region" label-width="150rpx">
						<uni-data-picker :placeholder="addressContent"
										 popup-title="请选择城市" 
										 collection="opendb-city-china" 
										 field="code as value, name as text" 
										 orderby="value asc" 
										 :step-searh="true" 
										 self-field="code" 
										 parent-field="parent_code"
						@change="onchange" class="changeRegion">
						   </uni-data-picker>
					</u-form-item>
					<u-form-item label="详细地址" prop="addressDetail" label-width="150rpx">
						<u-input v-model="form.addressDetail" type="text" placeholder="街道门牌,楼层房间号等信息"/>
					</u-form-item>
					<u-form-item label="邮政编码" prop="postalCode" label-width="150rpx">
						<u-input v-model="form.postalCode" type="text" placeholder="邮政编码"/>
					</u-form-item>
					<view class="address-default">
						<view class="">设为默认收货地址</view>
						<u-switch v-model="checkDefaul" active-color="#0C34BA"></u-switch>
					</view>
				</u-form>
			</view>
			<u-button hover-class="none" shape="circle" :custom-style="commitMall"  @click="updateAddress">保存地址</u-button>
			<u-button hover-class="none" shape="circle" :custom-style="delMall"  @click="delAddress">删除</u-button>
		</view>
	</view>
</template>

<script>
	import {getAddressByAid,postDelAddress,postEditAddress} from "network/address.js"
	
	import TopbarChangeAddress from "./childMyAddress/TopbarChangeAddress.vue" 
	
	export default{
		onLoad(option) {
			this.aid = option.aid
			getAddressByAid(option.aid).then(res=>{
				if(res.data.code == 40000){
					let results = res.data.result[0]
					this.form.name = results.name
					this.form.tel = results.tel
					this.form.province = results.province
					this.form.city = results.city
					this.form.county = results.county
					this.form.addressDetail = results.addressDetail
					this.form.areaCode = results.areaCode
					this.form.postalCode = results.postalCode
					if(results.isDefault == 1){
						this.checkDefaul = true
					}
					this.addressContent = `${results.province}/${results.city}/${results.county}`
				}
			})
		},
		onReady() {
				this.$refs.uForm.setRules(this.rules);
		},
		computed:{
			isDefaul(){
				if(this.checkDefaul)return 1
				return 0
			}
		},
		data() {
			return {
				addressContent:null,
				checkDefaul:false,
				aid:null,
				form:{
						tel:"",
						name:"",
						province:"",
						city:"",
						county:"",
						areaCode:null,
						addressDetail:"",
						postalCode: null,
					},
				rules: {
					name:[
						{
							required: true,
							message: '请输入姓名', 
						}
					],
					region:[
						{
							message: '请选择城市', 
						}
					],
					tel: [
						{ 
							required: true, 
							message: '请输入正确手机号', 
							pattern: /^1[3-9]\d{9}$/,
						}
					],
					addressDetail:[
						{
							required: true,
							message: '请填写详细地址', 
						}
					],
					postalCode:[
						{
							required: true,
							message: '请填写邮政编码', 
						}
					],
				},
				commitMall:{
					color: "#FFFFFF",
					width:"100%",
					fontSize: "30rpx",
					backgroundColor:"#0C34BA",	
				},
				delMall:{
					width:"100%",
					fontSize: "30rpx",
					backgroundColor:"#f4f4f4",
					marginTop:"30rpx",
					borderColor:"#f4f4f4"
				}
			}
		},
		components:{
			TopbarChangeAddress
		},
		methods:{
			updateAddress(){
				this.$refs.uForm.validate(valid => {
					if (valid && this.form.county !== "") {
						
						postEditAddress(this.aid,this.form,this.isDefaul).then(res=>{
							if(res.data.code == 30000){
								uni.showToast({
								    title: res.data.msg,
								    duration: 2000,
									icon:'none'
								})
								setTimeout(()=>{
									uni.navigateTo({
										url:"./MyAddress"
									})
								},1000)
							}else{
								uni.showToast({
								    title: res.data.msg,
								    duration: 2000,
									icon:'none'
								})
							}
						})
					}
				});
			},
			onchange(e) {
			  const value = e.detail.value
			  this.$set(this.form,"province",value[0].text)
			  this.$set(this.form,"city",value[1].text)
			  this.$set(this.form,"county",value[2].text)
			  this.$set(this.form,"areaCode",value[2].value)
			},
			delAddress(){
				postDelAddress(this.aid).then(res=>{
					if(res.data.code == 10000){
						uni.showToast({
						    title: res.data.msg,
						    duration: 2000,
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateTo({
								url:"./MyAddress"
							})
						},1000)
					}
				})
			}
		}
	}
</script>

<style scoped>
	.orderSum{
		font-size: 35rpx;
	}
	.add-new-address{
		margin: 10rpx 40rpx;
	}
	.changeRegion{
		width: 100%;
	}
	.address-default{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx 0rpx 40rpx 0rpx;
	}
</style>
